<template>
	<!-- 货源服务 -->
	<view class="link-container link-list">
		<view v-if="auth === 'CarStore' && title === '门店服务'" class="h2-title flex flex-jc-sb">
      <view>{{ title }}</view>
      <view class="right-link" @click="goPage('#')">
        <text>经营日报</text>
        <u-icon name="arrow-right" color="#666666" size="28"></u-icon>
      </view>
    </view>
		<view v-else class="h2-title">{{ title }}</view>
    
		<slot name="body">
			<!-- 功能版块链接 -->
			<view v-if="auth === 'CarStore'" class="module-link flex flex-ai-c">
				<template v-for="(ser, i) in data">
					<view :key="ser.label" @click="goPage(ser.path)" class="link-item item-w-25 flex flex-dir-c flex-ai-c" hover-class="none">
						<i-icon :icon="ser.icon" :color="ser.color" :size="iconSize(ser)"></i-icon>
						<text class="text">{{ ser.label }}</text>
					</view>
				</template>
			</view>

			<!-- 功能版块链接 -->
			<view v-if="auth === 'Factory'" class="module-link flex flex-ai-c flex-jc-sa">
				<template v-for="(ser, i) in data">
					<view :key="ser.label" @click="goPage(ser.path)" class="link-item item-w-20 flex flex-dir-c flex-ai-c" hover-class="none">
						<i-icon :icon="ser.icon" :color="ser.color" :size="iconSize(ser)"></i-icon>
						<text class="text">{{ ser.label }}</text>
					</view>
				</template>
			</view>

			<!-- 功能版块链接 -->
			<view v-if="auth === 'BeautyStore'" class="module-link flex flex-ai-c">
				<template v-for="(ser, i) in data">
					<view :key="ser.label" @click="goPage(ser.path)" class="link-item flex item-w-25 flex-dir-c flex-ai-c" hover-class="none">
						<i-icon :icon="ser.icon" :color="ser.color" :size="iconSize(ser)"></i-icon>
						<text class="text">{{ ser.label }}</text>
					</view>
				</template>
			</view>

			<!-- 功能版块链接 -->
			<view v-if="auth === 'RepairStore'" class="module-link flex flex-ai-c flex-jc-sa">
				<template v-for="(ser, i) in data">
					<view :key="ser.label" @click="goPage(ser.path)" class="link-item flex item-w-25 flex-dir-c flex-ai-c" hover-class="none">
						<i-icon :icon="ser.icon" :color="ser.color" :size="iconSize(ser)"></i-icon>
						<text class="text">{{ ser.label }}</text>
					</view>
				</template>
			</view>
		</slot>
	</view>

</template>

<script>
	export default {
		name: 'link-card',
		props: {
			title: {
				type: String,
				default: '设置标题',
			},
			auth: {
				type: String,
			},
      
      more: {
        type: '',
        default: false
      },

			data: {
				type: Array,
				default: () => []
			}
		},
    
    computed: {
      
    },
    
    methods: {
      goPage(page) {
        if (page === '#') {
          uni.showToast({
            title: '敬请期待',
            icon: 'none'
          })
        } else {
          uni.navigateTo({
            url: page
          })
        }
      },
      
      // 图标大小
      iconSize(item, i) {
        if (['车源', '物流'].includes(item.label)) {
          return '46rpx'
        } else {
          return '52rpx'
        }
      }
    }
	}
</script>

<style lang="scss" scoped>
	.link-container {
		margin: 20rpx 0 20rpx 0;
		.h2-title {
			padding: 30rpx 0;
			font-size: 34rpx;
			font-weight: bold;
			color: #666666;
		}
    
    .right-link {
      font-size: 28rpx;
      color: #666666;
    }
	}

	.link-list {
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 12rpx;

		.module-link {
			display: flex;
			flex-wrap: wrap;

			.link-item {
				// width: 25%;
				margin-bottom: 32rpx;

				// 根据颜色遍历，设置不同图标的颜色
				$colors: #fa763e #ffc20e #43a0fc #f96a56 #08c182;

				@for $i from 1 to length($colors)+1 {
					.icons-#{$i} {
						// font-size: 52rpx;
						color: nth($colors, $i);
					}
				}

				.text {
					margin-top: 16rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #666666;
				}
			}

			.item-w-20 {
				width: 20%;
			}

			.item-w-25 {
				width: 25%;
			}
		}
	}
</style>
